<template>
	<div class="lhPersonInfo">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/dataExpress' }"><i class="lh fw_300 lh-seller fz_20"></i></el-breadcrumb-item>
			<el-breadcrumb-item>人才列表</el-breadcrumb-item>
			<el-breadcrumb-item>人才详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div class="essential-box">
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">姓名：</div>
							<div class="val">{{ userInfo.name }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">性别：</div>
							<div class="val">
								<span class="next_label" v-if="userInfo.gender == 'male'">男</span>
								<span class="next_label" v-if="userInfo.gender == 'female'">女</span>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">民族：</div>
							<div class="val">{{ userInfo.nationality }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">注册时间</div>
							<div class="val">{{ userInfo.add_time }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">手机号：</div>
							<div class="val">{{ userInfo.mobile }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">出生日期：</div>
							<div class="val">{{ userInfo.birthday }}</div>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="grid-content">
							<div class="key">实名时间：</div>
							<div class="val">{{ userInfo.certification_time }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">签约状态：</div>
							<div class="val">{{ userInfo.certification_status_desc }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">审核人：</div>
							<div class="val">{{ sign_info.qy_audit_name }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">审核时间：</div>
							<div class="val">{{ sign_info.qy_time }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">备注：</div>
							<div class="val" style="max-width: 80%;">{{ sign_info.qy_fail_reason }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">灵活儿状态：</div>
							<div class="val">{{ userInfo.staff_status_desc }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">审核人：</div>
							<div class="val">{{ sign_info.audit_name }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">审核时间：</div>
							<div class="val">{{ sign_info.signed_time }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">备注：</div>
							<div class="val" style="max-width: 80%;">{{ sign_info.fail_reason }}</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="key">首次出工日期：</div>
							<div class="val">{{ userInfo.first_work_date }}</div>
						</div>
					</el-col>
				</el-row>
			</div>

			<!-- el-tabs -->
			<el-tabs type="border-card"  @tab-click="handleClick">
				<el-tab-pane label="基本信息">
					<template>
						<basic-information v-if="userInfo.sign_info" :userInfo="userInfo" @refresh-info="fetchUsersInfo"/>
					</template>
				</el-tab-pane>
				<el-tab-pane label="证件照片">
					<template>
						<id-photo v-if="userInfo.certification_info" :userInfo="userInfo" />
					</template>
				</el-tab-pane>
				<el-tab-pane label="岗位等级">
					<template>
						<job-level v-if="pageNum == 2" :userInfo="userInfo" />
					</template>
				</el-tab-pane>
				<el-tab-pane label="个人简历">
					<template>
						<personel-resume v-if="userInfo" :userInfo="userInfo" />
					</template>
				</el-tab-pane>
				<el-tab-pane label="服务店铺">
					<template>
						<service-shops v-if="userInfo" :userInfo="userInfo" />
					</template>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
import { fetchUsersInfo } from '@/api/user.js'
import basicInformation from './components/BasicInformation'
import IdPhoto from './components/IdPhoto.vue'
import JobLevel from './components/JobLevel.vue'
import PersonelResume from './components/PersonelResume.vue'
import ServiceShops from './components/ServiceShops.vue'
export default {
	name: 'ShopCooperationInfo',
	components: {
		basicInformation,
		IdPhoto,
		JobLevel,
		PersonelResume,
		ServiceShops
	},
	data() {
		return {
			id: '', //用户ID
			userInfo: {}, //用户信息
			pageNum: 0,
			sign_info: '', //签约信息

		}
	},
	async mounted() {
		this.id = this.$route.query.id; //接收传参
		this.fetchUsersInfo()
	},
	methods: {
		//获取用户信息
		async fetchUsersInfo() {
			try {
				let res = await fetchUsersInfo({ 
					id: this.$route.query.id,
					service_history: 'service_history'
				})
				this.userInfo = res
				this.sign_info = res.sign_info
				this.userInfo.birthday = res.birthday.substr(0, 10)
				this.userInfo.certification_time = this.userInfo.certification_info.certification_time
			} catch (err) {
				console.log(err)
			}
		},
		handleClick(tab) {
			this.pageNum = tab.paneName
		}
	}
}
</script>

<style scoped>
.essential-box {
	margin-bottom: 30px;
}
.essential-box .grid-content {
	display: flex;
	height: auto;
	padding: 10px 0;
	height: 30px;
	line-height: 30px;
}
.essential-box .grid-content .key {
	width: 110px;
	font-size: 13px;
	color: #999999;
	text-align: right;
}
.essential-box .grid-content .val {
	font-size: 14px;
	padding-left: 20px;
	color: #222222;
}
.sign-audit-btn {
	margin-left: 20px;
	font-size: 12px;
	padding: 3px 10px;
}
.audit-dialog {
	display: flex;
	padding-bottom: 20px;
}
.audit-dialog .key {
	width: 100px;
	color: #999999;
}
.lhPersonInfo .edit-btn .el-button.is-round {
	padding: 10px 20px;
}
.lhPersonInfo .el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
	background: #3a54e2;
}
</style>



// WEBPACK FOOTER //
// src/components/staff/PersonnelDetails.vue